<template> 
    <div class="new-site">
        <div class="cell">
            <div class="title">收货人姓名</div>
            <div class="main">
                <input placeholder="输入姓名" v-model="form.name"/>
            </div>
        </div>
        <div class="cell">
            <div class="title">联系电话</div>
            <div class="main">
                <input placeholder="输入手机号" v-model="form.phone"/>
            </div>
        </div>
        <div class="cell">
            <div class="title">所在地区</div>
            <div class="main">
            <picker mode="region" @change="bindRegionChange" :value="region" > 
                <div>{{form.address}}</div>
            </picker>
               
            </div>
        </div>
        <div class="cell">
            <div class="title">详细地址</div>
            <div class="main">
                <textarea placeholder="详细地址" v-model="form.address_detail"></textarea>
            </div>
        </div>
        <zan-cell title="开关">
            <switch slot="footer"  :checked="form.is_default" @change="switchChange"/>
        </zan-cell>
        <div class="footer">
            <div class="btn text-center" @click="addSite">确定</div>
        </div> 

        <div>
            
        </div>
    </div> 
</template>

<script> 
import * as api from '@/utils/api' 
export default {
    onShow(){
        this.form={
            name:'',
            phone:'',
            address:'选择地区',
            address_detail:'',
            is_default:false,
        }
    },
    data () {
        return {
            form:{
                name:'',
                phone:'',
                address:'选择地区',
                address_detail:'',
                is_default:false,
            },
            region: [],
        }
    },
    methods:{
        addSite(){
            let vm = this; 
            if(vm.regForm()){
                let body={
                    model: "Address",
                    data: {
                        uid: wx.getStorageSync('u_id'),
                        name:vm.form.name,
                        phone: vm.form.phone.trim(),
                        address:vm.form.address,
                        address_detail: vm.form.address_detail 
                    }
                }
                vm.form.is_default?body.data.is_default=1:body.data.is_default=0;
                api.createSite(body).then(res=>{
                    if(res.data.code==200){ 
                        wx.showToast({
                            title: '添加成功',
                            icon: 'succes', 
                            mask:true
                        })
                        wx.navigateBack({ delta: 1  });
                    }
                });
            } 
        },
        regForm(){
            let phoneNo=/^[1][3,4,5,6,7,8][0-9]{9}$/;
            if(this.form.name==''){
                wx.showToast({icon:'none', title: '请输入收货人姓名' })
                return false;
            }else if(!phoneNo.test(this.form.phone.trim())){
                wx.showToast({icon:'none', title: '请输入正确手机号' })
                return false;
            }else if(this.form.address==''){
                wx.showToast({icon:'none', title: '请选择地址' })
                return false;
            }else if(this.form.address_detail==''){
                wx.showToast({icon:'none', title: '请输入详细地址' })
                return false;
            }else{
                return true;
            }
        },
        bindRegionChange: function (e) { 
            this.region=e.mp.detail.value 
            this.form.address=e.mp.detail.value[0]+e.mp.detail.value[1]+e.mp.detail.value[2]
        },
        switchChange(e){
            this.form.is_default=e.mp.detail.value;
        },
    },
    mounted() {
       
    }, 
}

</script>
 
<style scoped lang="scss">
.new-site{
    padding:20rpx 0;
    box-sizing:border-box;
    .cell{
        width:100%;
        padding:20rpx 30rpx 0;
        box-sizing:border-box;
        font-size:28rpx;
        background:#fff;
        margin-bottom:20rpx;
        .title{
            width:100%;
            color:#999;
            font-size:27rpx;
            padding-left:10rpx;
            box-sizing:border-box;
            border-left:4rpx solid #CD4640;
            margin-bottom:20rpx;
        }
        .main{
            padding:20rpx 10rpx;
            box-sizing:border-box;
            border-top:1rpx solid #E9E9E9;
            textarea{
                height:120rpx;
            }
        }
        
    }
    .footer{
        width:100%;
        margin-top:40rpx;
        font-size:30rpx;
        .btn{
            width:80%;
            padding:20rpx;
            box-sizing:border-box;
            margin:auto;
            background:#CD4640;
            color:#fff;
            border-radius:20rpx;
            &:active{
                background-color:rgba(205,70,64,0.5)
            }
        }
    }
} 
</style>
